<template>
  <div class="page">
    <div id="mallPage" class=" mallist tmall- page-not-market ">

      <!-- 头部搜索 -->
      <div id="header" class=" header-list-app">
        <div class="headerLayout">
          <div class="headerCon ">
            <!-- Logo-->
            <h1 id="mallLogo">
              <img src="../../../assets/images/jdlogo.png" alt="">
            </h1>

            <div class="header-extra">

              <!--搜索-->
              <div id="mallSearch" class="mall-search">
                <form name="searchTop" class="mallSearch-form clearfix">
                  <fieldset>
                    <legend>天猫搜索</legend>
                    <div class="mallSearch-input clearfix">
                      <div id="s-combobox-685" class="s-combobox">
                        <div class="s-combobox-input-wrap">
                          <input
                            id="mq"
                            v-model="keyword"
                            type="text"
                            autocomplete="off"
                            class="s-combobox-input"
                            aria-haspopup="true"
                          >
                        </div>
                      </div>
                      <button id="searchbtn" type="submit" @click.prevent="searchKey">搜索</button>
                    </div>
                  </fieldset>
                </form>
                <ul class="relKeyTop">
                  <li><a>狂神说Java</a></li>
                  <li><a>狂神说前端</a></li>
                  <li><a>狂神说Linux</a></li>
                  <li><a>狂神说大数据</a></li>
                  <li><a>狂神聊理财</a></li>
                </ul>
              </div>
              <button id="importEs" type="submit" @click.prevent="importEs">导入ES</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 商品详情页面 -->
      <div id="content">
        <div class="main">
          <!-- 品牌分类 -->
          <form class="navAttrsForm">
            <div class="attrs j_NavAttrs" style="display:block">
              <div class="brandAttr j_nav_brand">
                <div class="j_Brand attr">
                  <div class="attrKey">
                    品牌
                  </div>
                  <div class="attrValues">
                    <ul class="av-collapse row-2">
                      <li><a href="#"> 狂神说 </a></li>
                      <li><a href="#"> Java </a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </form>

          <!-- 排序规则 -->
          <div class="filter clearfix">
            <a class="fSort fSort-cur">综合<i class="f-ico-arrow-d" /></a>
            <a class="fSort">人气<i class="f-ico-arrow-d" /></a>
            <a class="fSort">新品<i class="f-ico-arrow-d" /></a>
            <a class="fSort">销量<i class="f-ico-arrow-d" /></a>
            <a class="fSort">价格<i class="f-ico-triangle-mt" /><i class="f-ico-triangle-mb" /></a>
          </div>

          <!-- 商品详情 -->
          <div class="view grid-nosku">

            <div v-for="(result ,index)in results" class="product">
              <div class="product-iWrap">
                <!--商品封面-->
                <div class="productImg-wrap">
                  <a class="productImg">
                    <img :src="result.img">
                  </a>
                </div>
                <!--价格-->
                <p class="productPrice">
                  <em v-text="result.price" />
                </p>
                <!--标题-->
                <p class="productTitle">
                  <a v-html="result.name" />
                </p>
                <!-- 店铺名 -->
                <div class="productShop">
                  <span>店铺： 狂神说Java </span>
                </div>
                <!-- 成交信息 -->
                <p class="productStatus">
                  <span>月成交<em>999笔</em></span>
                  <span>评价 <a>3</a></span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: '',
  components: {},
  data() {
    return {
      'keyword': '', // 搜索的关键字
      'results': [] // 后端返回的结果
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
  mounted() {
    this.init()
  },
  methods: {
    searchKey() {
      var keyword = this.keyword
      console.log(keyword)
      request({
        url: '/search/' + keyword + '/0/20',
        method: 'get'
      }).then(data => {
        console.log(data)
        this.results = data
      })
    },
    importEs() {
      var keyword = this.keyword
      console.log(keyword)
      request({
        url: '/parse/' + keyword,
        method: 'get'
      }).then(data => {
        console.log(data)
        this.results = data
      })
    }
  }
}
</script>

<style scoped>
  /*** uncss> filename:http://localhost:9090/css/global.css ***/body,button,fieldset,form,h1,input,legend,li,p,ul {
    margin:0;
    padding:0
  }
  body,button,input {
    font:12px/1.5 tahoma,arial,"\5b8b\4f53";
    -ms-overflow-style:scrollbar
  }
  button,h1,input {
    font-size:100%
  }
  em {
    font-style:normal
  }
  ul {
    list-style:none
  }
  a {
    text-decoration:none
  }
  a:hover {
    text-decoration:underline
  }
  legend {
    color:#000
  }
  fieldset,img {
    border:0
  }
  #content,#header {
    margin-left:auto;
    margin-right:auto
  }
  html {
    zoom:expression(function(ele) {
	ele.style.zoom = "1";
	document.execCommand("BackgroundImageCache",false,true);
}
(this))}@font-face {
    font-family:mui-global-iconfont;
    src:url(//at.alicdn.com/t/font_1401963178_8135476.eot);
    src:url(//at.alicdn.com/t/font_1401963178_8135476.eot?#iefix) format('embedded-opentype'),url(//at.alicdn.com/t/font_1401963178_8135476.woff) format('woff'),url(//at.alicdn.com/t/font_1401963178_8135476.ttf) format('truetype'),url(//at.alicdn.com/t/font_1401963178_8135476.svg#iconfont) format('svg')
  }
  #mallPage {
    width:auto;
    min-width:990px;
    background-color:transparent
  }
  #content {
    width:990px;
    margin:auto
  }
  #mallLogo {
    float:left;
    z-index:9;
    padding-top:28px;
    width:280px;
    height:64px;
    line-height:64px;
    position:relative
  }
  .page-not-market #mallLogo {
    width:400px
  }
  .clearfix:after,.clearfix:before,.headerCon:after,.headerCon:before {
    display:table;
    content:"";
    overflow:hidden
  }
  #mallSearch legend {
    display:none
  }
  .clearfix:after,.headerCon:after {
    clear:both
  }
  .clearfix,.headerCon {
    zoom:1
  }
  #mallPage #header {
    margin-top:-30px;
    width:auto;
    margin-bottom:0;
    min-width:990px;
    background:#fff
  }
  #header {
    height:122px;
    margin-top:-26px!important;
    background:#fff;
    min-width:990px;
    width:auto!important;
    position:relative;
    z-index:1000
  }
  #mallSearch #mq,#mallSearch fieldset,.mallSearch-input {
    position:relative
  }
  .headerLayout {
    width:990px;
    padding-top:26px;
    margin:0 auto
  }
  .header-extra {
    overflow:hidden
  }
  #mallSearch {
    float:right;
    padding-top:25px;
    width:390px;
    overflow:hidden
  }
  .mallSearch-form {
    border:solid #FF0036;
    border-width:3px 0 3px 3px
  }
  .mallSearch-input {
    background:#fff;
    height:30px
  }
  #mallSearch #mq {
    color:#000;
    margin:0;
    z-index:2;
    width:289px;
    height:20px;
    line-height:20px;
    padding:5px 3px 5px 5px;
    outline:0;
    border:none;
    font-weight:900;
    background:url(data:image/gif;
    base64,R0lGODlhAQADAJEAAObm5t3d3ff39wAAACH5BAAAAAAALAAAAAABAAMAAAICDFQAOw==) repeat-x;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box
  }
  #mallSearch button {
    position:absolute;
    right:0;
    top:0;
    width:90px;
    border:0;
    font-size:16px;
    letter-spacing:4px;
    cursor:pointer;
    color:#fff;
    background-color:#FF0036;
    height:30px;
    overflow:hidden;
    font-family:'\5FAE\8F6F\96C5\9ED1',arial,"\5b8b\4f53"
  }
  #mallSearch .s-combobox {
    height:30px;
    width:400px
  }
  #mallSearch .s-combobox .s-combobox-input:focus {
    outline:0
  }
  button::-moz-focus-inner {
    border:0;
    padding:0;
    margin:0
  }
  .page-not-market #mallSearch {
    width:540px!important
  }
  .page-not-market #mq {
    width:439px!important
  }
  /*** uncss> filename:http://localhost:9090/css/test.css ***/#mallSearch {
                                                                float:none
                                                              }
  .page-not-market #mallLogo {
    width:280px
  }
  .header-list-app #mallSearch {
    width:448px!important
  }
  .header-list-app #mq {
    width:347px!important
  }
  @media (min-width:1210px) {
    #header .headerCon,#header .headerLayout,.main {
      width:1190px!important
    }
    .header-list-app #mallSearch {
      width:597px!important
    }
    .header-list-app #mq {
      width:496px!important
    }
  }@media (min-width:600px) and (max-width:800px) and (orientation:portrait) {
    .pg .page {
      min-width:inherit!important
    }
    .pg #mallPage,.pg #mallPage #header {
      min-width:740px!important
    }
    .pg #header .headerCon,.pg #header .headerLayout,.pg .main {
      width:740px!important
    }
    .pg #mallPage #mallLogo {
      width:260px
    }
    .pg #header {
      min-width:inherit
    }
    .pg #mallSearch .mallSearch-input {
      padding-right:95px
    }
    .pg #mallSearch .s-combobox {
      width:100%!important
    }
    .pg #mallPage .header-list-app #mallSearch {
      width:auto!important
    }
    .pg #mallPage .header-list-app #mallSearch #mq {
      width:100%!important;
      padding:5px 0 5px 5px
    }
  }i {
     font-style:normal
   }
  .main,.page {
    position:relative
  }
  .page {
    overflow:hidden
  }
  @font-face {
    font-family:tm-list-font;
    src:url(//at.alicdn.com/t/font_1442456441_338337.eot);
    src:url(//at.alicdn.com/t/font_1442456441_338337.eot?#iefix) format('embedded-opentype'),url(//at.alicdn.com/t/font_1442456441_338337.woff) format('woff'),url(//at.alicdn.com/t/font_1442456441_338337.ttf) format('truetype'),url(//at.alicdn.com/t/font_1442456441_338337.svg#iconfont) format('svg')
  }
  ::selection {
    background:rgba(0,0,0,.1)
  }
  * {
    -webkit-tap-highlight-color:rgba(0,0,0,.3)
  }
  b {
    font-weight:400
  }
  .page {
    background:#fff;
    min-width:990px
  }
  #content {
    margin:0!important;
    width:100%!important
  }
  .main {
    margin:auto;
    width:990px
  }
  .main img {
    -ms-interpolation-mode:bicubic
  }
  .fSort i {
    background:url(//img.alicdn.com/tfs/TB1XClLeAY2gK0jSZFgXXc5OFXa-165-206.png) 9999px 9999px no-repeat
  }
  #mallSearch .s-combobox {
    width:auto
  }
  ::-ms-clear,::-ms-reveal {
    display:none
  }
  .attrKey {
    white-space:nowrap;
    text-overflow:ellipsis
  }
  .attrs {
    border-top:1px solid #E6E2E1
  }
  .attrs a {
    outline:0
  }
  .attr {
    background-color:#F7F5F5;
    border-color:#E6E2E1 #E6E2E1 #D1CCC7;
    border-style:solid solid dotted;
    border-width:0 1px 1px
  }
  .attr ul:after,.attr:after {
    display:block;
    clear:both;
    height:0;
    content:' '
  }
  .attrKey {
    float:left;
    padding:7px 0 0;
    width:10%;
    color:#B0A59F;
    text-indent:13px
  }
  .attrKey {
    display:block;
    height:16px;
    line-height:16px;
    overflow:hidden
  }
  .attrValues {
    position:relative;
    float:left;
    background-color:#FFF;
    width:90%;
    padding:4px 0 0;
    overflow:hidden
  }
  .attrValues ul {
    position:relative;
    margin-right:105px;
    margin-left:25px
  }
  .attrValues ul.av-collapse {
    overflow:hidden
  }
  .attrValues li {
    float:left;
    height:22px;
    line-height:22px
  }
  .attrValues li a {
    position:relative;
    color:#806F66;
    display:inline-block;
    padding:1px 20px 1px 4px;
    line-height:20px;
    height:20px;
    white-space:nowrap
  }
  .attrValues li a:hover {
    color:#ff0036;
    text-decoration:none
  }
  .brandAttr .attr {
    border:2px solid #D1CCC7;
    margin-top:-1px
  }
  .brandAttr .attrKey {
    padding-top:9px
  }
  .brandAttr .attrValues {
    padding-top:6px
  }
  .brandAttr .av-collapse {
    overflow:hidden;
    max-height:60px
  }
  .brandAttr li {
    margin:0 8px 8px 0
  }
  .brandAttr li a {
    text-overflow:ellipsis;
    overflow:hidden
  }
  .navAttrsForm {
    position:relative
  }
  .relKeyTop {
    padding:4px 0 0;
    margin-left:-13px;
    height:30px;
    overflow:hidden;
    width:100%
  }
  .relKeyTop li {
    display:inline-block;
    border-left:1px solid #ccc;
    line-height:1.1;
    padding:0 12px
  }
  .relKeyTop li a {
    color:#999
  }
  .relKeyTop li a:hover {
    color:#ff0036;
    text-decoration:none
  }
  .filter i {
    display:inline-block;
    overflow:hidden
  }
  .filter {
    margin:10px 0;
    padding:5px;
    position:relative;
    z-index:10;
    background:#faf9f9;
    color:#806f66
  }
  .filter i {
    position:absolute
  }
  .filter a {
    color:#806f66;
    cursor:pointer
  }
  .filter a:hover {
    color:#ff0036;
    text-decoration:none
  }
  .fSort {
    float:left;
    height:22px;
    line-height:20px;
    line-height:24px\9;
    border:1px solid #ccc;
    background-color:#fff;
    z-index:10
  }
  .fSort {
    position:relative
  }
  .fSort {
    display:inline-block;
    margin-left:-1px;
    overflow:hidden;
    padding:0 15px 0 5px
  }
  .fSort:hover,a.fSort-cur {
    color:#ff0036;
    background:#F1EDEC
  }
  .fSort i {
    top:6px;
    right:5px;
    width:7px;
    height:10px;
    line-height:10px
  }
  .fSort .f-ico-arrow-d {
    background-position:-22px -23px
  }
  .fSort-cur .f-ico-arrow-d,.fSort:hover .f-ico-arrow-d {
    background-position:-30px -23px
  }
  i.f-ico-triangle-mb,i.f-ico-triangle-mt {
    border:4px solid transparent;
    height:0;
    width:0
  }
  i.f-ico-triangle-mt {
    border-bottom:4px solid #806F66;
    top:2px
  }
  i.f-ico-triangle-mb {
    border-top:4px solid #806F66;
    border-width:3px\9;
    right:6px\9;
    top:12px
  }
  :root i.f-ico-triangle-mb {
    border-width:4px\9;
    right:5px\9
  }
  i.f-ico-triangle-mb,i.f-ico-triangle-mt {
    border:4px solid transparent;
    height:0;
    width:0
  }
  i.f-ico-triangle-mt {
    border-bottom:4px solid #806F66;
    top:2px
  }
  i.f-ico-triangle-mb {
    border-top:4px solid #806F66;
    border-width:3px\9;
    right:6px\9;
    top:12px
  }
  :root i.f-ico-triangle-mb {
    border-width:4px\9;
    right:5px\9
  }
  .view:after {
    clear:both;
    content:' '
  }
  .productImg,.productPrice em b {
    vertical-align:middle
  }
  .product {
    position:relative;
    float:left;
    padding:0;
    margin:0 0 20px;
    line-height:1.5;
    overflow:visible;
    z-index:1
  }
  .product:hover {
    overflow:visible;
    z-index:3;
    background:#fff
  }
  .product-iWrap {
    position:absolute;
    background-color:#fff;
    margin:0;
    padding:4px 4px 0;
    font-size:0;
    border:1px solid #f5f5f5;
    border-radius:3px
  }
  .product-iWrap * {
    font-size:12px
  }
  .product:hover .product-iWrap {
    height:auto;
    margin:-3px;
    border:4px solid #ff0036;
    border-radius:0;
    -webkit-transition:border-color .2s ease-in;
    -moz-transition:border-color .2s ease-in;
    -ms-transition:border-color .2s ease-in;
    -o-transition:border-color .2s ease-in;
    transition:border-color .2s ease-in
  }
  .productPrice,.productShop,.productStatus,.productTitle {
    display:block;
    overflow:hidden;
    margin-bottom:3px
  }
  .view:after {
    display:block
  }
  .view {
    margin-top:10px
  }
  .view:after {
    height:0
  }
  .productImg-wrap {
    display:table;
    table-layout:fixed;
    height:210px;
    width:100%;
    padding:0;
    margin:0 0 5px
  }
  .productImg-wrap a,.productImg-wrap img {
    max-width:100%;
    max-height:210px
  }
  .productImg {
    display:table-cell;
    width:100%;
    text-align:center
  }
  .productImg img {
    display:block;
    margin:0 auto
  }
  .productPrice {
    font-family:arial,verdana,sans-serif!important;
    color:#ff0036;
    font-size:14px;
    height:30px;
    line-height:30px;
    margin:0 0 5px;
    letter-spacing:normal;
    overflow:inherit!important;
    white-space:nowrap
  }
  .productPrice * {
    height:30px
  }
  .productPrice em {
    float:left;
    font-family:arial;
    font-weight:400;
    font-size:20px;
    color:#ff0036
  }
  .productPrice em b {
    margin-right:2px;
    font-weight:700;
    font-size:14px
  }
  .productTitle {
    display:block;
    color:#666;
    height:14px;
    line-height:12px;
    margin-bottom:3px;
    word-break:break-all;
    font-size:0;
    position:relative
  }
  .productTitle * {
    font-size:12px;
    font-family:\5FAE\8F6F\96C5\9ED1;
    line-height:14px
  }
  .productTitle a {
    color:#333
  }
  .productTitle a:hover {
    color:#ff0036!important
  }
  .productTitle a:visited {
    color:#551A8B!important
  }
  .product:hover .productTitle {
    height:14px
  }
  .productShop {
    position:relative;
    height:22px;
    line-height:20px;
    margin-bottom:5px;
    color:#999;
    white-space:nowrap;
    overflow:visible
  }
  .productStatus {
    position:relative;
    height:32px;
    border:none;
    border-top:1px solid #eee;
    margin-bottom:0;
    color:#999
  }
  .productStatus span {
    float:left;
    display:inline-block;
    border-right:1px solid #eee;
    width:39%;
    padding:10px 1px;
    margin-right:6px;
    line-height:12px;
    text-align:left;
    white-space:nowrap
  }
  .productStatus a,.productStatus em {
    margin-top:-8px;
    font-family:arial;
    font-size:12px;
    font-weight:700
  }
  .productStatus em {
    color:#b57c5b
  }
  .productStatus a {
    color:#38b
  }
  .productImg-wrap {
    position:relative
  }
  .product-iWrap {
    min-height:98%;
    width:210px
  }
  .view {
    padding-left:5px;
    padding-right:5px
  }
  .view {
    width:1023px
  }
  .view .product {
    width:220px;
    margin-right:33px
  }
  @media (min-width:1210px) {
    .view {
      width:1210px;
      padding-left:5px;
      padding-right:5px
    }
    .view .product {
      width:220px;
      margin-right:20px
    }
  }@media (min-width:600px) and (max-width:800px) and (orientation:portrait) {
    .view {
      width:775px;
      padding-left:5px;
      padding-right:5px
    }
    .view .product {
      width:220px;
      margin-right:35px
    }
  }.product {
     height:372px
   }
  .grid-nosku .product {
    height:333px
  }

</style>
